<template>
	<view class="page">
		<view class="pay-page">
			<view @click="backOrderDet()" class="pay-return">
				<image src="../../static/img/pay-return.png"></image>
			</view>
			<view class="pay-header">
				<view class="pay">支付</view>
				<image src="../../static/img/pay-edite.png"></image>
			</view>
		</view>
		<view class="pay-body">
			<view class="pay-content">总共需要支付</view>
			<view class="pay-price">￥{{price}}</view>
		</view>
		<view class="pay-select">
			<view class="pay-items">
				<image src="../../static/img/pay-alipay.png"></image>
				<view class="pay-alipay">支付宝支付</view>
				<radio value="r1" :checked="checked == 0" @click="changeSelect(0)"></radio>
			</view>
			<view <view class="pay-items">
				<image src="../../static/img/pay-wechat.png"></image>
				<view class="pay-wechat">微信支付</view>
				<radio value="r2" :checked="checked == 1" @click="changeSelect(1)"></radio>
			</view>
			<view <view class="pay-items">
				<image src="../../static/img/pay-card.png"></image>
				<view class="pay-card">银行卡支付</view>
				<radio value="r3" :checked="checked == 2" @click="changeSelect(2)"></radio>
			</view>
			<button class="submit-btn" @click="payed">确认提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pay-component",
		data() {
			return {
				checked: 0,
				price:300
			}
		},
		onLoad(option) {
			// 接收传过来的酒店价格
			this.price = option.price
		},
		methods:{
			changeSelect(index){
				this.checked = index
			},
			// 返回酒店预定详情页
			backOrderDet() {
				uni.navigateBack({
					url:"../orderDetails/orderDetails"
				})
			},
			// 支付完成
			payed() {
				uni.showToast({
					title:'支付成功',
					icon:'success'
				})
				//延迟2秒后执行跳转
			setTimeout(() => {
				uni.switchTab({
					url:"../index/index"
				})
			}, 2000)
			}
		}
	}
</script>

<style>
	.pay-page {
		background-color: #2BBBD8;
	}

	.pay-header {
		font-size: 60rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		margin-left: 20rpx;
	}

	.pay-header image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		margin-top: 15rpx;
	}

	.pay-body {
		font-size: 40rpx;
		font-weight: bold;
		height: 50rpx;
		display: flex;
		margin-top: 100rpx;
		margin-left: 225rpx;
		margin-bottom: 70rpx;
	}

	.pay-price {
		margin-left: 10rpx;
		color: red;
	}

	.pay-select {
		/* display: flex; */
		align-items: center;
	}

	.pay-items {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	.pay-select image {
		width: 100rpx;
		height: 100rpx;
	}

	.submit-btn {
		background-color: #2BBBD8;
		color: white;
		margin-top: 300rpx;
	}

	.pay-return image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 50rpx;
		margin-left: 20rpx;
	}
</style>